<template>
  <div class="recycle-bin-box">
    <div class="recycle-bin-title">
      <div class="title">{{ $t('message.silder.recycleBin') }}</div>
      <div class="right-action" v-if="checkeds.length > 0">
        <div>{{ $t('message.text.checked') }}&nbsp;{{ checkeds.length }}/20&nbsp;{{ $t('message.text.term') }}</div>
        <div class="cancal-button" @click="cancalSelect">{{ $t('message.text.deselect') }}</div>
        <el-button @click="batchRec">{{ $t('message.text.recovery') }}</el-button>
        <el-button @click="batchDel">{{ $t('message.text.comDelete') }}</el-button>
      </div>
      <!-- <div class="view-type-box"> 
            <svg class="icon" :class="[showType=='list' && 'active']" @click="changeViewType('list')">
              <use xlink:href="#keowledge-liebiaoshitu"></use>
            </svg>
            <svg class="icon" :class="[showType=='map' && 'active']" @click="changeViewType('map')">
              <use xlink:href="#keowledge-pingpushitu"></use>
            </svg>
        </div> -->
    </div>
    <div class="list-item list-header">
      <div class="item-check" :class="[checkeds.length > 0 && 'show-item-check']">
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"></el-checkbox>
      </div>
      <div class="item-name">
        {{ $t('message.index.fileName') }}
        <svg class="sort-icon" @click="changeSort('name')">
          <use v-bind:xlink:href="`#${nameSort == 'desc' ? 'keowledge-a-paixu-jiangxu1' : 'keowledge-paixu-shengxu'}`"></use>
        </svg>
      </div>
      <div class="item-author">
        {{ $t('message.text.operator') }}
      </div>
      <div class="item-time">
        {{ $t('message.text.deleteTime') }}
        <svg class="sort-icon" @click="changeSort('updateTime')">
          <use v-bind:xlink:href="`#${timeSort == 'desc' ? 'keowledge-a-paixu-jiangxu1' : 'keowledge-paixu-shengxu'}`"></use>
        </svg>
      </div>
      <div class="item-action"></div>
    </div>
    <div class="list-items-box" v-loading="listLoading">
      <el-scrollbar v-if="recycleList.length != 0">
        <div v-for="(item, index) in recycleList" :key="index" class="list-item">
          <div class="item-check" :class="[checkeds.length > 0 && 'often-show']">
            <el-checkbox-group v-model="checkeds" @change="handleCheckedChange"
              :disabled="checkeds.length >= 20 && isCheckItem(item)">
              <el-checkbox :label="item.id">&nbsp;</el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="item-name" v-tooltip-auto-show>
            <svg class="file-icon">
              <use v-bind:xlink:href="getIcon(item.type, item.nameSuffix)"></use>
            </svg>
            <el-tooltip :content="item.name" effect="light">
              <span>{{ item.name }}</span>
            </el-tooltip>
          </div>
          <div class="item-author" v-tooltip-auto-show>
            <el-tooltip :content="item.updateBy" effect="light">
              <span>{{ item.updateBy }}</span>
            </el-tooltip>
          </div>
          <div class="item-time" v-tooltip-auto-show>
            <el-tooltip :content="item.updateTime" effect="light">
              <span>{{ item.updateTime }}</span>
            </el-tooltip>
          </div>
          <div class="item-action">
            <el-tooltip :content="$t('message.tooltips.restoreFiles')" effect="light">
              <svg class="action-icon recycle-icon" @click="retrieveFile(item, index)">
                <use xlink:href="#keowledge-huifu"></use>
              </svg>
            </el-tooltip>
            <el-tooltip :content="$t('message.text.comDelete')" effect="light">
              <svg class="action-icon" @click="thoroughFile(item, index)">
                <use xlink:href="#keowledge-qingchulishijilu"></use>
              </svg>
            </el-tooltip>
          </div>
          <div class="bottom-line"></div>
        </div>
      </el-scrollbar>
      <jvs-empty v-if="recycleList.length == 0"></jvs-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance
} from 'vue'

import { useRouter } from "vue-router"
const router = useRouter();
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
const emit = defineEmits([""])
import { knowledgeRecycle, dclRetrieve, delLib } from '@/api/knowledge'
const { proxy } = getCurrentInstance()
const props = defineProps({
})
const showType = ref('map')
const nameSort = ref('desc')
const timeSort = ref('desc')
const recycleList = ref([])
const listLoading = ref(false)
const checkAll = ref(false)
const isIndeterminate = ref(false)
const checkeds = ref([])
onMounted(() => {
  init()
})
function init() {
  listLoading.value = true
  knowledgeRecycle({
    size: 100,
    current: 1,
  }).then(res => {
    if (res.data.code == 0) {
      recycleList.value = res.data.data.records
      listSort('updateTime', timeSort.value)
    }
    listLoading.value = false
  }).catch(err => {
    listLoading.value = false
  })
}
function changeViewType(val) {
  if (showType.value != val) {
    showType.value = val
  }
}
function changeSort(prop) {
  let sort = ''
  if (prop == 'name') {
    nameSort.value = nameSort.value == 'desc' ? 'asc' : 'desc'
    sort = nameSort.value
  } else if (prop = 'updateTime') {
    timeSort.value = timeSort.value == 'desc' ? 'asc' : 'desc'
    sort = timeSort.value
  }
  listSort(prop, sort)
}
function listSort(prop, sort) {
  recycleList.value.sort((a, b) => {
    if (sort == 'desc') {
      if (a[prop] > b[prop]) {
        return -1
      } else {
        return 1
      }
    } else {
      if (a[prop] < b[prop]) {
        return -1
      } else {
        return 1
      }
    }
  })
}
function isCheckItem(item) {
  return !checkeds.value.includes(item.id)
}
function retrieveFile(item, index) {
  const copyItem = JSON.parse(JSON.stringify(item))
  delete copyItem.updateTime
  sendRieve([copyItem], index)
}
function sendRieve(params, index) {
  dclRetrieve(params).then(res => {
    if (res.data.code == 0) {
      if (res.data.data.length == 0) {
        if (index != -1) {
          recycleList.value.splice(index, 1)
        } else {
          recycleList.value = recycleList.value.filter((item) => checkeds.value.indexOf(item.id) == -1)
        }
        if (index == -1) {
          isIndeterminate.value = false
        }
        for (let i = 0; i < params.length; i++) {
          delCheckedId(params[i].id)
        }
        proxy.$notify({
          title: $t('message.tooltips.restoreFiles'),
          message: $t('message.message.actionSuccess'),
          type: 'success',
          position: 'bottom-right'
        })
      } else {
        if (index == -1) {
          const delItem = params.filter(item => !res.data.data.includes(item.name))
          for (let i = 0; i < delItem.length; i++) {
            delCheckedId(delItem[i].id)
            recycleList.value = recycleList.value.filter((item) => item.id != delItem[i].id)
          }
        }
        proxy.$notify({
          title: $t('message.tooltips.restoreFiles'),
          message: `${$t('message.text.fileRecoveryFailed')}${params.length > 1 ? $t('message.text.fileSuperior') : $t('message.text.superior')}`,
          type: 'error',
          position: 'bottom-right'
        })
      }
    }
  })
}
function thoroughFile(item, index) {
  proxy.$confirm(item.type == 'directory' ? $t('message.confirm.delAllFile') : $t('message.confirm.delFile'), $t('message.prompt'), {
    confirmButtonText: $t('message.buttons.submit'),
    cancelButtonText: $t('message.buttons.cancal'),
    type: 'warning'
  }).then(() => {
    sendDel([item.id], index)
  }).catch(() => {
  });
}
function sendDel(params, index) {
  delLib(params).then(res => {
    if (res.data.code == 0) {
      if (index != -1) {
        recycleList.value.splice(index, 1)
      } else {
        recycleList.value = recycleList.value.filter((item) => params.indexOf(item.id) == -1)
      }
      for (let i = 0; i < params.length; i++) {
        delCheckedId(params[i])
      }
      if (index == -1) {
        isIndeterminate.value = false
      }
      proxy.$notify({
        title: $t('message.text.comDelete'),
        message: $t('message.message.actionSuccess'),
        type: 'success',
        position: 'bottom-right'
      })
    }
  })
}
function delCheckedId(id: never) {
  let index = checkeds.value.indexOf(id)
  if (index != -1) {
    checkeds.value.splice(index, 1)
    handleCheckedChange(checkeds.value)
  }
}
function handleCheckAllChange(val: boolean) {
  checkeds.value = []
  if (val) {
    recycleList.value.forEach((item) => {
      if (checkeds.value.length < 20) {
        checkeds.value.push(item.id)
      }
    })
  }
  isIndeterminate.value = false
}
function handleCheckedChange(value: string[]) {
  const checkedCount = value.length
  checkAll.value = checkedCount === recycleList.value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < recycleList.value.length
}
function cancalSelect() {
  checkeds.value = []
  checkAll.value = false
  isIndeterminate.value = false
}
// 批量恢复
function batchRec() {
  let arr = []
  recycleList.value.forEach((item) => {
    if (checkeds.value.includes(item.id)) {
      arr.push(item)
    }
  })
  sendRieve(arr, -1)
}
// 批量删除
function batchDel() {
  proxy.$confirm($t('message.confirm.delCheckedFile'), $t('message.prompt'), {
    confirmButtonText: $t('message.buttons.submit'),
    cancelButtonText: $t('message.buttons.cancal'),
    type: 'warning'
  }).then(() => {
    sendDel(checkeds.value, -1)
  }).catch(() => {
  });
}
</script>
<style lang="scss" scoped>
.recycle-bin-box {
  position: relative;
  width: 100%;
  height: 100%;

  .recycle-bin-title {
    height: 30px;
    padding: 0px 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #363b4c;
    @include SourceHanSansCN-Bold;
    width: 100%;
    justify-content: space-between;

    .right-action {
      display: flex;
      align-items: center;
      font-size: 12px;
      @include SourceHanSansCN-Regular;

      .cancal-button {
        color: #1E6FFF;
        margin: 0px 16px;
        cursor: pointer;
      }
    }

    .view-type-box {
      width: 64px;
      height: 30px;
      border-radius: 4px;
      background-color: #f0f1f2;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 16px;

      .icon {
        width: 20px;
        height: 20px;
        border-radius: 2px;
        cursor: pointer;

        &:hover {
          background: #eeeff0;
        }
      }

      .icon+.icon {
        margin-left: 8px;
      }

      .active {
        background: #fff !important;
      }
    }
  }

  .list-item {
    display: flex;
    align-items: center;
    height: 52px;
    position: relative;

    .item-check {
      position: absolute;
      left: 12px;
      visibility: hidden;
    }

    .show-item-check {
      visibility: visible;
    }

    .sort-icon {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }

    .item-name {
      min-width: 80px;
      width: calc(100% - 524px);
      display: flex;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 8px;
      padding-left: 8px;
      box-sizing: border-box;

      span {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .item-author {
      min-width: 80px;
      font-size: 12px;
      color: #6F7588;
      width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 8px;
      box-sizing: border-box;

      span {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .item-time {
      min-width: 80px;
      width: 240px;
      display: flex;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 8px;
      box-sizing: border-box;

      span {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .item-action {
      min-width: 60px;
      width: 60px;
      display: flex;
      align-items: center;
    }
  }

  .list-header {
    height: 33px;
    padding: 0px 24px;
    font-size: 12px;
    color: #363B4C;
    @include SourceHanSansCN-Regular;
    position: relative;

    // border-bottom: 1px solid #eeeff0;
    &::after {
      position: absolute;
      bottom: 0px;
      height: 1px;
      width: calc(100% - 48px);
      background-color: #eeeff0;
      content: '';
    }

    user-select: none !important;

    .item-time {
      color: #363B4C;
    }

    .item-author {
      color: #363B4C;
    }

    &:hover {
      .item-check {
        visibility: visible;
      }
    }
  }

  .list-items-box {
    height: calc(100% - 79px);
    margin-bottom: 16px;

    .list-item {
      padding: 0px 24px;
      position: relative;

      .item-check {
        left: 12px;
        visibility: hidden;
      }

      .often-show {
        visibility: visible;
      }

      &:hover {
        background: #F5F6F7;

        .item-check {
          visibility: visible;
        }

        .item-action {
          .action-icon {
            display: block;
          }
        }
      }

      .bottom-line {
        width: 1118px;
        height: 1px;
        background: #EEEFF0;
        position: absolute;
        left: 58px;
        width: calc(100% - 82px);
        bottom: 0px;
      }

      .item-name {
        font-size: 14px;

        .file-icon {
          width: 20px;
          min-width: 20px;
          height: 20px;
          margin-right: 16px;
        }
      }

      .item-time {
        font-size: 12px;
        color: #6F7588;
      }

      .item-action {
        .action-icon {
          fill: #D8D8D8;
          width: 18px;
          height: 18px;
          cursor: pointer;
          // visibility: hidden;
          display: none;
        }

        .action-icon+.action-icon {
          margin-left: 8px;
        }

        .recycle-icon {
          width: 20px;
          height: 20px;
          margin-right: 8px;
        }
      }
    }
  }
}
</style>